<template>
    <div id="SpatialChart" v-drag>
            <el-card class="box-card">
            <div slot="header" class="clearfix" align="center">
                查询结果
                <el-button style="float: right; padding: 3px 0" type="text">关闭</el-button>
            </div>
            <el-container>
                <el-main>
                    <div id="ChartDiv" style="width:280px;height:240px">

                    </div>
                </el-main>
                <el-aside width="40px">
                    <div style="height:80px" align="center"><el-button class='staticBtn' icon="kfb-icon-bar-chart-outline" @click="drawHistogram"></el-button></div>
                    <div style="height:80px" align="center"><el-button class='staticBtn' icon="kfb-icon-ziyuanfenxi" @click="drawPie"></el-button></div>
                    <div style="height:80px" align="center"><el-button class='staticBtn' icon="kfb-icon-yunyingfenxi" @click="drawLine"></el-button></div>
                </el-aside>
            </el-container>
        </el-card>
    </div>   
</template>
<script>
import echarts from 'echarts';
export default {
    data() {
        return {
      }
    },
    mounted(){
        this.drawHistogram();
    },
    methods:{

        drawHistogram(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('ChartDiv'));
            // 绘制图表
            myChart.setOption({
                title: { text: 'echarts' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            },true);
        },

        drawPie(){
            let pieChart = echarts.init(document.getElementById('ChartDiv'));
            //绘制饼状图表
            pieChart.setOption({
                title:{text:'echarts'},
                tooltip:{
                    trigger:'item',
                    formatter:'{a} <br/>{b}: {c} ({d}%)'
                },
                // legend:{
                //     orient:'vertical',
                //     x:'left',
                //     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                // },
                series:[
                    {
                        name:'访问来源',
                        type:'pie',
                        radius:['50%','70%'],
                        avoidLabelOverlap: false,
                        label:{
                            normal:{
                                show:false,
                                position:'center'
                            },
                            emphasis:{
                                show:true,
                                textStyle:{
                                    fontSize:'30',
                                    fontWeight:'bold'
                                }
                            }
                        },
                        labelLine:{
                            normal:{
                                show:false
                            }
                        },
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                        
                    }
                ]
            },true);
        },

        drawLine(){
           let pieChart = echarts.init(document.getElementById('ChartDiv'));
            //绘制线状图
            pieChart.setOption({
                legend:{data:['高度与气温变换关系']},
                tooltip:{
                    trigger:'axis',
                    formatter:'Temperature : <br/>{b}km : {c}°C'
                },
                grid:{
                    left:'3%',
                    right:'4%',
                    bottom:'3%',
                    containLabel:true
                },
                xAxis:{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                yAxis: {
                    type: 'category',
                    axisLine: {onZero: false},
                    axisLabel: {
                        formatter: '{value} km'
                    },
                    boundaryGap: false,
                    data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
                },
                series:[
                    {
                        name: '高度(km)与气温(°C)变化关系',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                        data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
                    }
                ]
            },true);
        },

    },
    directives: {
        drag: {
            // 指令的定义
            bind: function (el) {
                let odiv = el;   //获取当前元素
                odiv.onmousedown = (e) => {
                    //算出鼠标相对元素的位置
                    let disX = e.clientX - odiv.offsetLeft;
                    let disY = e.clientY - odiv.offsetTop;
                    
                    document.onmousemove = (e)=>{
                        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX;    
                        let top = e.clientY - disY;
                      
                        //绑定元素位置到positionX和positionY上面
                        // this.positionX = top;
                        // this.positionY = left;
                
                        //移动当前元素
                        odiv.style.left = left + 'px';
                        odiv.style.top = top + 'px';
                        console.log( left + 'px');
                        console.log( top + 'px');
                    };
                    document.onmouseup = (e) => {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                };
            }
        }
    }
     
}
</script>



<style>
    #SpatialChart{
        position:absolute;
        bottom:20px;
        right:20px;
        z-index:999;
        width:330px;
        height:280px;
        cursor:pointer
    }

    #SpatialChart .clearfix{
        font-size: 14px;
    }

    #SpatialChart .text {
        font-size: 14px;
    }

    #SpatialChart .el-card__body{
        padding:0px;
    }

    #SpatialChart .item {
        margin-bottom: 10px;
    }

    #SpatialChart .clearfix:before,
    #SpatialChart .clearfix:after {
        display: table;
        content: "";
    }

    #SpatialChart .clearfix:after {
        clear: both
    }

    #SpatialChart .box-card {
        width: 100%;
        height:100%;
    }
    
    #SpatialChart .el-card__header{
        padding:5px 5px;
        background-color: rgb(22, 133, 216);
        color: white;
    }

    #SpatialChart .el-button span{
        color: white;
    }

    #SpatialChart .el-main{
        margin: 0px;
        padding: 0px;
    }

    #SpatialChart .el-button{
        padding: 10px 10px;
        border-radius: 0px;
    }

    #SpatialChart .staticBtn{
        margin-top: 15px;
        border: 0px;

    }


</style>
